<template>
    <view class="container">
        <view class="coupon-li">
            <view class="coupon-left">
                <view class="coupon-left-title">{{ ticket.description }}</view>
                <view v-if="ticket.beginAt" class="coupon-left-time">有效时间：{{ ticket.beginAt|dateFormat }}-{{ ticket.endAt|dateFormat }}</view>
            </view>
            <view class="coupon-right">
                <view v-if="ticket.type=='discount'" class="coupon-right-zk">
                    <text>{{ ticket.value * 10 }}</text>
                    <text>折</text>
                </view>
                <view v-if="ticket.type=='money'" class="coupon-right-zk">
                    <text>{{ ticket.value|valueFormat }}</text>
                    <text>元</text>
                </view>
                <!--view class="coupon-right-navigate">去使用</view-->
            </view>
        </view>
    </view>
</template>

<script>
    import { parseTime,isInteger } from "@/untils/index"
    export default {
        name: "index",
        props: {
            ticket: {
                type: Object,
                default: () => {}
            }
        },
        filters: {
            dateFormat(val) {
                return parseTime(val, "{y}.{m}.{d}")
            },
            valueFormat(val) {
                if (isInteger(val)) {
                    return parseInt(val)
                } else {
                    return  val
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .coupon-li {
        background: url("https://img.ionepin.com/9af4c584a39415c57ee01f1f7c92ffef5ec92e5c.png") no-repeat;
        background-size: 100% 100%;
        height: 160rpx;
        //margin-bottom: 26rpx;
        display: flex;
        justify-content: space-between;
        .coupon-left {
            padding-left: 26rpx;
            padding-top: 35rpx;
            .coupon-left-title {
                font-size: 26rpx;
                font-family: PingFang-SC-Bold, PingFang-SC;
                font-weight: bold;
                color: #000000;
                text-align: left;
            }
            .coupon-left-time {
                height: 36rpx;
                padding: 0 15rpx;
                border-radius: 20rpx;
                border: 1rpx solid #E02020;
                font-size: 20rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #E02020;
                line-height: 36rpx;
                margin-top: 16rpx;
            }
        }
        .coupon-right {
            margin-right: 45rpx;
            .coupon-right-zk {
                color: #FFFFFF;
                margin-top: 20rpx;
                text-align: center;
                text {
                    &:nth-child(1) {
                        font-size: 68rpx;
                        font-family: PingFang-SC-Bold, PingFang-SC;
                        font-weight: bold;
                    }
                    &:nth-child(2) {
                        font-size: 30rpx;
                    }
                }
            }
            .coupon-right-navigate {
                width: 120rpx;
                height: 32rpx;
                background: #FFFFFF;
                border-radius: 20rpx;
                text-align: center;
                font-size: 20rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #E02020;
            }
        }
    }
</style>
